<template>
  <div class="login-container">
    <div class="topTitle">
      <img :src='bgimg' alt="" class="yiju_logo" />
    </div>

    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <div class="card">
        <div class="closeBox">
          <van-icon
            name="cross"
            size="15"
            class="closeBtn"
            @click="clearForm"
          />
        </div>

        <van-field
          v-model="user.username"
          name="用户名"
          placeholder="用户名/手机号/邮箱"
          :rules="[{ required: true, message: '请填写用户名' }]"
          class="inputBox inputB_f"
        />
        <van-field
          v-model="user.password"
          type="password"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          class="inputBox"
        />

        <!-- <input type="text" placeholder="用户名/手机号/邮箱"  />
      <input type="password" placeholder="密码"  /> -->

        <div class="loginBox">
          <span>忘记密码</span>
          <span @click="onSubmit">提交</span>
        </div>
      </div>
    </van-form>
    <!-- /登录表单 -->
    <!-- 
    <div class="thirdWay">
      第三方登录
    </div> -->
  </div>
</template>

<script>
import { login } from "@/api/user";

export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      bgimg: require("../assets/yiju.png")
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async onSubmit() {
      console.log("submit");
      if (!this.user.username || !this.user.password)
        return this.$notify({
          type: "danger",
          message: "用户名和密码不能为空",
        });
      let { data } = await login(this.user);
      if (data.status == 200) {
        this.$notify({ type: "success", message: data.msg });
        if(data.token) {
          console.log(data);
           window.localStorage.setItem('tokenLogin', data.token)
           window.localStorage.setItem('username', this.user.username)
           this.$router.push('/index')
        }
       
      } else {
        if (data.msg) {
          this.$notify({ type: "warning", message: data.msg });
        } else {
          this.$notify({ type: "warning", message: "登录失败" });
        }
      }
    },

    clearForm() {
      this.user.password = '',
      this.user.username = ''
    },
  },
};
</script>

<style scoped lang="css">
.topTitle {
  box-sizing: border-box;
  background-color: #ff5653;
  color: white;
  font-size: 40px;
  height: 250px;
  padding-top: 90px;
  text-align: center;
}

.yiju_logo {
  width: 130px;
  height: 70px;
}

.card {
  /* height: 270px; */
  width: 270px;
  /* border: 1px solid #FF5555; */
  margin: 0 auto;
  margin-top: -70px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 15px rgba(255, 86, 83, 0.3);
  padding: 10px 10px;
  margin-bottom: 35px;
}

.closeBox {
  width: 100%;
  height: 42px;
  text-align: right;
  line-height: 0px;
}

.inputBox {
  width: 100%;
  font-size: 13px;
  color: #000000;
  background-color: #e5e5e5;
  border: 0;
  /*   height: 40px;
  line-height: 40px; */
  border-radius: 4px;
  padding: 10px 22px;
  box-sizing: border-box;
}

.inputB_f {
  margin-bottom: 17px;
}

.loginBox {
  /* height: 100%; */
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
}

.loginBox span {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #ff5555;
  font-size: 15px;
  color: #ff5555;
  width: 120px;
  height: 40px;
  line-height: 40px;
}

.thirdWay {
  font-size: 14px;
  color: #ff5555;
}
</style>
